<template>
	<div id="body" :style="note">
		<h1>广州科腾人事管理系统</h1>
		<div id="login">
			<section>
				<h3>用户登录</h3>
				<el-col>
					账号：
					<el-input v-model.trim="seachObj.userid"></el-input>
				</el-col>
				<el-col>
					密码：
					<el-input v-model.trim="seachObj.password" type="password"></el-input>
				</el-col>
				<el-col>
					<el-radio v-model="radio" label="0" border>普通员工</el-radio>
					<el-radio v-model="radio" label="1" border>管理员</el-radio>
				</el-col>
				<el-col>
					<el-tooltip content="点击登录" placement="bottom" effect="light">
						<el-button type="primary" @click="login" >登录</el-button>
					</el-tooltip>

				</el-col>
			</section>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				note: {
					backgroundImage: "url(" + require("@/assets/bg2.jpg") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%	",
				},
				seachObj: {
					userid: '',
					password: ''
				},
				radio: '0',
				value5: '100'
			}
		},
		methods: {
			login() {
				var vm = this;
				var url;
				if(vm.radio == "0") {
					url = vm.API.USERLOGIN;
				} else if(vm.radio == "1") {
					vm.seachObj.name = vm.seachObj.userid;
					url = vm.API.ROOTLOGIN;
				}

				if(vm.seachObj.userid == "" || vm.seachObj.password == "" || vm.seachObj.name == "") {
					vm.$message({
						message: '账号密码不能为空',
						type: 'error',
						center: true
					});
				} else {
					vm.$http.post(url, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
						if(res.data.message == "用户登录成功" || res.data.message == "管理员登录成功") {
							
							if(res.data.message == "用户登录成功") {
								if(res.data.data.data.root=="1"){
									vm.$message({
										message: res.data.message,
										center: true
									});
									this.$router.push({
										name: "personalInformation",
										query: {
											userid: res.data.data.data.userid,
											username: res.data.data.data.username
										}
									});
								}else{
									vm.$message({
										message: "人事管理员登录成功",
										center: true
									});
									this.$router.push({
										name: "ask",
										query: {
											userid: res.data.data.data.userid,
											username: res.data.data.data.username,
											root: res.data.data.data.root,
										}
										
									});
								}
							} else {
								this.$router.push({
									name: "staff"
								});
							}

						} else {
							vm.$message({
								message: res.data.message,
								center: true,
								type: 'error'
							});
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		color: white;
	}
	
	#body {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
		h1 {
			text-align: center;
			margin-top: 5%;
			margin-bottom: 10px;
		}
		#login {
			font-family: 'Avenir', Helvetica, Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-align: center;
			width: 30%;
			height: 450px;
			color: #2c3e50;
			margin: 0 auto;
			background: rgba(255, 255, 255, 0.2);
			position: relative;
			section {
				position: absolute;
				left: 10%;
			}
			h3 {
				width: 90%;
				height: 30px;
				line-height: 30px;
				margin: 30px auto;
				text-align: left;
				display: block;
				border-bottom: 1px solid white;
			}
			.el-col {
				width: 80%;
				margin: 0 auto;
				height: 40px;
				line-height: 40px;
				margin-bottom: 25px;
				text-align: right;
				display: block;
			}
			.el-col .el-input {
				width: 75%;
				margin: 0 auto;
			}
			.el-col .el-radio {
				margin: 0 30px;
			}
			.el-button {
				width: 60%;
				margin: 10px 30px;
			}
		}
	}
</style>